<template>
  <div class="message-input">
    <div class="toolbar">
      <button 
        class="tool-btn"
        title="上传图片"
        @click="handleUpload"
      >
        <Icon icon="mdi:image" />
      </button>
      <button 
        class="tool-btn"
        title="清空输入"
        @click="clearInput"
        :disabled="!content"
      >
        <Icon icon="mdi:eraser" />
      </button>
    </div>

    <div class="input-area">
      <textarea
        ref="textareaRef"
        v-model="content"
        :rows="1"
        placeholder="输入消息，Enter 发送，Shift + Enter 换行"
        @keydown="handleKeydown"
        @input="adjustHeight"
      ></textarea>

      <button 
        class="send-btn"
        :disabled="!content.trim() || disabled"
        @click="handleSend"
      >
        <Icon :icon="disabled ? 'mdi:loading' : 'mdi:send'" />
      </button>
    </div>

    <div class="footer">
      <div class="hints">
        <span class="hint">Enter 发送</span>
        <span class="hint">Shift + Enter 换行</span>
        <span class="hint">/ 触发提示</span>
      </div>
      <div class="settings">
        <button 
          class="setting-btn"
          title="设置"
          @click="$emit('settings')"
        >
          <Icon icon="mdi:cog" />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Icon } from '@iconify/vue'
import { message } from '@/services/message'

const props = defineProps<{
  disabled?: boolean
}>()

const emit = defineEmits<{
  (e: 'send', content: string): void
  (e: 'settings'): void
}>()

const content = ref('')
const textareaRef = ref<HTMLTextAreaElement | null>(null)

const adjustHeight = () => {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
    textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`
  }
}

const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    handleSend()
  }
}

const handleSend = () => {
  const trimmedContent = content.value.trim()
  if (!trimmedContent || props.disabled) return

  emit('send', trimmedContent)
  content.value = ''
  adjustHeight()
}

const clearInput = () => {
  content.value = ''
  adjustHeight()
}

const handleUpload = () => {
  message.info('图片上传功���开发中...')
}

onMounted(() => {
  adjustHeight()
})
</script>

<style lang="scss" scoped>
.message-input {
  border-top: 1px solid var(--border-color);
  background: var(--bg-color);
  padding: 12px 20px;
}

.toolbar {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;

  .tool-btn {
    padding: 6px;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: var(--hover-bg);
      color: var(--primary-color);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

.input-area {
  display: flex;
  gap: 12px;
  align-items: flex-end;

  textarea {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    max-height: 200px;
    transition: all 0.3s;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px var(--primary-light);
    }

    &::placeholder {
      color: var(--text-secondary);
    }
  }

  .send-btn {
    padding: 12px;
    border: none;
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: var(--primary-hover);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .iconify {
      font-size: 20px;
    }
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  
  .hints {
    display: flex;
    gap: 16px;
    
    .hint {
      font-size: 12px;
      color: var(--text-secondary);
    }
  }

  .settings {
    .setting-btn {
      padding: 6px;
      border: none;
      background: none;
      color: var(--text-secondary);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: var(--hover-bg);
        color: var(--primary-color);
      }
    }
  }
}
</style> 